<template>
  <view class="question-box">
    <view class="question" :style="'top:'+topStyle+'px;'">
      <view class="question-top"></view>
      <view class="question-title-box">
        <view class="wen">问题:</view>
        <view class="question-title">{{info.questionText}}</view>
      </view>
      <view class="list" :class="isVideoAnswerUnitList?'list-hover':''">
        <view class="item" :class="answerId===item.answerId?'item-hover':''" v-for="(item,index) in info.options" @click="setAnswerId(item.answerId)">
          <view class="options-title">{{item.answerText}}</view>
          <view v-if="isVideoAnswerUnitList" class="count">{{videoAnswerUnitList[index].count}}</view>
          <view :style="'width: '+videoAnswerUnitList[index].schedule+'%;'" class="schedule"></view>
        </view>
      </view>
      <view v-if="!isVideoAnswerUnitList" class="message">
        {{info.sum}}人已参与<br />
        回答后可查看其他人回答情况哦！
      </view>
      <view v-if="!isVideoAnswerUnitList" class="button" @click="submit">提交</view>
    </view>
    <view class="bottom" :style="bottomStyle">
      <view class="bottom-icon"></view>
      <view class="text">上滑继续查看视频</view>
    </view>
  </view>
</template>

<script>
export default {
  props:['questionnaireItem'],
  data() {
    return {
      topStyle:uni.getStorageSync('menuInfo').contentTopcount+75,
      info:{},
      answerId:0,
      videoAnswerUnitList:{},
      isVideoAnswerUnitList:false,
      bottomStyle:''
    };
  },
  created() {
    this.bottomStyle=`bottom: ${uni.getStorageSync('footer-menu').height-20}px;`;
    this.init()
    if(this.questionnaireItem.res){
      this.end(this.questionnaireItem.res)
      this.answerId=this.questionnaireItem.answerId
    }
  },
  methods: {
    async init()
    {
      let data={
        questionId:this.questionnaireItem.qaId
      }
      let res =  await this.$javaCircle.doRequest("get",'vs/videoQuestion/questioninfo',data,'')
      this.info=res.data.data
    },
    setAnswerId(id)
    {
      if(this.isVideoAnswerUnitList){
        return
      }
      this.answerId=id;
    },
    // 提交答案
    async submit()
    {
      if(this.answerId===0){
        uni.showToast({title:'请选择',icon:'none'});
        return
      }
     let data ={
       answerId:this.answerId,
       questionId:this.questionnaireItem.qaId,
       stage:this.questionnaireItem.stage,
       channel:this.questionnaireItem.channel,
       requestId:this.questionnaireItem.requestId,
       sceneId:this.questionnaireItem.sceneId,
       tag:this.questionnaireItem.tag,
       videoId:this.questionnaireItem.id
     }
     let res = await this.$javaCircle.doRequest("post",'vs/videoQuestion/submit',data,'json');
     if(res.data.code===0){
       this.end(res.data.data)
       this.$emit('setQuestionnaire',res.data.data,this.answerId)
     }
    },
    // 答题结束后执行
    end(res)
    {
      this.isVideoAnswerUnitList=true;
      this.videoAnswerUnitList=res.videoAnswerUnitList.map(item=>{
        let newObj=item;
        newObj.schedule=newObj.count/res.sum*100;
        return newObj
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.question-box{
  width: 100%;
  height: 100%;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/bg_shipingyouhuawenti.png");
  background-size: 100% auto;
}
.question-box .question{
  width: 670upx;
  position: relative;
  min-height: 300upx;
  background: linear-gradient(115deg, #C9F6FA 0%, #D9F9E8 57%, #C7FFFF 100%);
  border-radius: 0 0 44upx 44upx;
  box-sizing: border-box;
  padding: 88upx 35upx 48upx 35upx;
  left: 50%;
  top: 100upx;
  transform: translate(-50%,0%);
  z-index: 10;
}
.question-top{
  width: 836upx;
  height: 273upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/bg_zhuangshitoubu.png");
  background-size: 100% 100%;
  position: absolute;
  top: -136upx;
  left: 50%;
  transform: translate(-50%,0%);
}
.question-title-box{
  width: 100%;
}
.question-title-box .wen{
  font-size: 36upx;
  color: #5CAE77;
  margin-bottom: 24upx;
}
.question-title-box .question-title{
  font-size: 46upx;
  color: #26314A;
  font-weight: 600;
  margin-bottom: 60upx;
}
.list{
  width: 100%;
  max-height: 500upx;
  overflow: auto;
}
.item{
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 19upx;
  background-color: #E0FFEA;
  color: #5CAE77;
  border: 4upx solid #5CAE77;
  border-radius: 60upx;
  margin-bottom: 34upx;
  font-size: 46upx;
  transition: all .3s linear;
  position: relative;
}
.message{
  width: 100%;
  color: #7C9D90;
  font-size: 38upx;
  margin-top: 30upx;
}
.question .button{
  width: 100%;
  height: 98upx;
  background: linear-gradient(180deg, #52E883 0%, #04AA3B 100%);
  box-shadow: 0upx 4upx 10upx 0upx rgba(0,67,29,0.4), inset 0upx 5upx 5upx 0upx #5AFF6A;
  border-radius: 54upx;
  line-height: 98upx;
  text-align: center;
  font-size: 46upx;
  color: #fff;
  text-shadow: 0upx 4upx 10upx rgba(0,67,29,0.4);
  margin-top: 20upx;
}
.bottom{
  position: absolute;
  bottom: 150upx;
  left: 50%;
  transform: translate(-50%,50%);
  font-size: 35upx;
  color: #F5F5F5;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}
.bottom-icon{
  width: 32upx;
  height: 27upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/top-icon.png");
  background-size: 100% 100%;
  margin-bottom: 11upx;
}
.item-hover{
  background-color: #5CAE77;
  color: #fff;

}
.list-hover .item{
  border-radius: 8rpx;
  padding: 17rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F0F8F3;
  border: 2upx solid #C5C5C5;
  color: #8F8F8F;
}
.list-hover .item-hover{
  background-color: #E0FFEA !important;
  border: 2upx solid #2BAF56;
  color: #2BAF56;
}
.item view{
  position: relative;
  z-index: 10;
}
.item .schedule{
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #D3D3D3;
  transition: all .6s linear;
  border-radius: 0 0 8upx 8upx;
  z-index: 9;
}
.item-hover .schedule{
  background-color: #B7F1CA;
}
.options-title{
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-hover .item-hover .options-title::after{
  content: '';
  display: block;
  width: 42upx;
  height: 32upx;
  margin-left: 20upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/icon_duigou%402x.png");
  background-size: 100% 100%;
  //position: relative;
  //top: 50%;
  //right: -42upx;
  //transform: translate(-50%,0%);
}
</style>
